import React from 'react';
import { Form, Input, InputNumber, Button, notification, Switch,Tooltip } from 'antd';
import { connect } from "umi";
import {
    QuestionCircleOutlined,
  } from '@ant-design/icons';

class AddForm extends React.Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            loading: false,
            data: {},            
        }
    }
    formRef: any = React.createRef();
    componentDidMount() {
        console.log(this.props);
        this.fetchData();
    }
    fetchData = () => {
        if (this.props.cateid > 0) {
            this.setState({ loading: true });
            this.props.dispatch({
                type: 'Abp/get',
                payload: { Id: this.props.cateid },
                control: 'Category',
            }).then(() => {
                this.formRef.current.setFieldsValue({ category: this.props.response.result });
                this.setState({ loading: false });
            })
        }
        if (this.props.parentCate.id > 0 && this.props.cateid == 0) {
            let cateobj = {
                id: this.props.cateid,
                parentId: this.props.parentCate.id,
                level: this.props.parentCate.level + 1,
                layout: this.props.layout
            }
            this.formRef.current.setFieldsValue({ category: cateobj });
        }
        else {
            let cateobj = {
                id: 0,
                parentId: 0,
                level: 1,
                layout: this.props.layout
            }
            this.formRef.current.setFieldsValue({ category: cateobj });
        }

    }
    onFinish = (values: any) => {
        this.setState({ loading: true });
        let _action = 'Abp/create'
        if (values.category.id > 0)
            _action = 'Abp/update'
        this.props.dispatch({
            type: _action,
            payload: values.category,
            control: 'Category',
        }).then(() => {
            this.setState({ loading: false });
            if (this.props.response.success) {
                notification['success']({
                    message: 'Notice',
                    description: '更新成功！',
                });
                this.props.RefreshData();
            }
            else {
                console.log(this.props.response)
                notification['error']({
                    message: 'Error',
                    description: '操作失败，请联系系统管理员。',
                });
            }
        })
    };
    render() {

        const layout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
        };

        return (
            <Form {...layout} ref={this.formRef} name="nest-messages" onFinish={this.onFinish}>
                <Form.Item name={['category', 'categoryName']} label="分类名" rules={[{ required: true, message: "分类名必填" }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'categoryIndex']} label="分类索引" rules={[{ required: true, message: "分类索引必填" }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'icons']} label="图标">
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'path']} label="路径" hidden={this.props.layout!='Menu'}>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'component']} label="组件地址" hidden={this.props.layout!='Menu'}>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'authority']} label={<span>
                              <Tooltip title="请填写大写字母角色名，多个角色名用“,”隔开">
                              授权&nbsp;<QuestionCircleOutlined />
                              </Tooltip></span>} hidden={this.props.layout!='Menu'}>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'layout']} label="所属模块" rules={[{ required: true, message: "模块必填" }]}>
                    <Input disabled={true} />
                </Form.Item>
                <Form.Item name={['category', 'orderIndex']} label="排序">
                    <InputNumber />
                </Form.Item>
                <Form.Item name={['category', 'isHide']} label="是否隐藏" valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item name={['category', 'id']} hidden>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'parentId']} hidden>
                    <Input />
                </Form.Item>
                <Form.Item name={['category', 'level']} hidden>
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                    <Button type="primary" htmlType="submit" loading={this.state.loading}>确定</Button>
                </Form.Item>
            </Form>
        );
    }
}

export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(AddForm);